<template>
  <div class="order-list-container">
    <!-- 顶部导航栏 -->
    <header class="order-header">
      <i class="fa fa-arrow-left back-btn" @click="$router.back()"></i>
      <h1>我的订单</h1>
      <div class="header-placeholder"></div>
    </header>

    <!-- 订单分类选项卡 -->
    <div class="order-tabs-container">
      <div class="tabs-wrapper">
        <div v-for="tab in tabList" :key="tab.key" class="order-tab" :class="{ active: activeTab === tab.key }"
          @click="setActiveTab(tab.key)">
          <span class="tab-text">{{ tab.label }}</span>
          <!-- <span v-if="getTabCount(tab.key)" class="tab-badge">{{ getTabCount(tab.key) }}</span> -->
        </div>
        <div class="tab-slider" :style="sliderStyle"></div>
      </div>
    </div>

    <!-- 订单列表 -->
    <main class="orders-main">
      <!-- 加载状态 -->
      <div v-if="isLoading" class="loading-state">
        <div class="loading-spinner">
          <i class="fa fa-spinner fa-spin"></i>
        </div>
        <p>订单加载中...</p>
      </div>

      <!-- 空状态 -->
      <div v-else-if="filteredOrders.length === 0" class="empty-state">
        <div class="empty-icon">
          <i class="fa fa-file-text-o"></i>
        </div>
        <h3>暂无订单</h3>
        <p>您还没有相关的订单记录</p>
        <button class="browse-btn" @click="$router.push('/index')">
          <i class="fa fa-shopping-bag"></i>
          去下单
        </button>
      </div>

      <!-- 订单列表 -->
      <div v-else class="orders-grid">
        <div v-for="order in filteredOrders" :key="order.id" class="order-card" :data-status="order.status">
          <!-- 订单头部 -->
          <div class="card-header">
            <div class="shop-info">
              <i class="fa fa-store shop-icon"></i>
              <span class="shop-name">{{ getBusinessName(order) }}</span>
            </div>
            <div class="order-status" :class="'status-' + order.status">
              {{ getStatusText(order.status) }}
            </div>
          </div>

          <!-- 订单内容 -->
          <div class="card-body">
            <div class="order-items">
              <div v-for="(item, idx) in order.items" :key="idx" class="order-item">
                <span class="item-name">{{ item.name }}</span>
                <span class="item-quantity">×{{ item.quantity }}</span>
                <span class="item-price">¥{{ item.price.toFixed(2) }}</span>
              </div>
            </div>

            <div class="order-summary">
              <div class="delivery-fee">
                <span>配送费</span>
                <span>¥{{ (order.deliveryPrice).toFixed(2) }}</span>
              </div>
              <div class="order-total">
                <span>合计</span>
                <span class="total-amount">¥{{ order.total.toFixed(2) }}</span>
              </div>
            </div>
          </div>

          <!-- 订单详情切换 -->
          <div class="details-toggle" @click="toggleDetails(order)">
            <span class="toggle-text">{{ order.showDetails ? '收起详情' : '查看订单详情' }}</span>
            <i class="fa" :class="order.showDetails ? 'fa-chevron-up' : 'fa-chevron-down'"></i>
          </div>

          <!-- 订单详情 -->
          <div v-if="order.showDetails" class="order-details">
            <div class="detail-row">
              <i class="fa fa-hashtag detail-icon"></i>
              <div class="detail-content">
                <span class="detail-label">订单编号</span>
                <span class="detail-value">{{ order.id }}</span>
              </div>
            </div>
            <div class="detail-row">
              <i class="fa fa-clock detail-icon"></i>
              <div class="detail-content">
                <span class="detail-label">下单时间</span>
                <span class="detail-value">{{ order.createTime.split('.')[0] }}</span>
              </div>
            </div>
            <div class="detail-row">
              <i class="fa fa-map-marker detail-icon"></i>
              <div class="detail-content">
                <span class="detail-label">配送地址</span>
                <span class="detail-value">{{ order.address }}</span>
              </div>
            </div>
          </div>

          <!-- 评价区域 - 点击评价商家按钮后才显示 -->
          <div v-if="order.status === 'ended' && order.showReviewForm" class="review-section">
            <div class="review-header">
              <i class="fa fa-star review-icon"></i>
              <h4>评价商家</h4>
            </div>

            <!-- 评分区域 -->
            <div class="rating-section">
              <div class="rating-title">{{ order.rating || 0 }}分</div>
              <div class="rating-stars">
                <span v-for="star in 5" :key="star" class="star" :class="{ active: star <= order.rating }"
                  @click="setRating(order, star)">
                  <i class="fa fa-star"></i>
                </span>
              </div>
            </div>

            <!-- 评价内容 -->
            <div class="comment-section">
              <textarea v-model="order.reviewText" class="review-textarea" placeholder="分享您的用餐体验..."
                maxlength="200"></textarea>
            </div>

            <!-- 操作按钮 -->
            <div class="review-actions">
              <button class="btn btn-submit" @click="submitReview(order)">
                <i class="fa fa-check"></i>
                提交评价
              </button>
            </div>
          </div>

          <!-- 已评价状态显示 -->
          <div v-else-if="order.status === 'ended' && order.comment" class="reviewed-section">
            <div class="reviewed-header">
              <i class="fa fa-check-circle reviewed-icon"></i>
              <span class="reviewed-text">已评价</span>
            </div>
            <div class="reviewed-content">
              <div class="reviewed-rating">
                <span class="rating-stars">
                  <span v-for="star in 5" :key="star" class="star" :class="{ active: star <= (order.star || 0) }">
                    <i class="fa fa-star"></i>
                  </span>
                </span>
                <span class="rating-value">{{ order.star || 0 }}分</span>
              </div>
              <div class="reviewed-comment" v-if="order.comment">
                {{ order.comment }}
              </div>
            </div>
          </div>

          <!-- 操作按钮 -->
          <div class="card-actions">
            <button v-for="action in getActions(order)" :key="action.text" class="action-btn"
              :class="'btn-' + action.type" @click="handleAction(action, order)">
              {{ action.text }}
            </button>
          </div>
        </div>
      </div>
    </main>

    <footer class="bottom-nav">
      <div class="nav-item" :class="{ active: $route.path === '/index' }" @click="$router.push('/index')">
        <i class="fa fa-home"></i>
        <span>首页</span>
      </div>
      <div class="nav-item">
        <i class="fa fa-compass"></i>
        <span>商家</span>
      </div>
      <div class="nav-item active">
        <i class="far fa-file-alt"></i>
        <span>订单</span>
      </div>
      <div class="nav-item" @click="$router.push('/userProfile')">
        <i class="fa fa-user"></i>
        <span>我的</span>
      </div>
    </footer>
  </div>
</template>

<script>
export default {
  name: 'OrderList',
  data() {
    return {
      activeTab: 'all',
      orderArr: [],
      user: {},
      businessMap: {},
      isLoading: false,
      tabList: [
        { key: 'all', label: '全部订单' },
        { key: 'unpaid', label: '待支付' },
        { key: 'paid', label: '待接单' },
        { key: 'received', label: '已接单' },
        { key: 'ended', label: '已完成' }
      ]
    };
  },

  computed: {
    filteredOrders() {
      if (this.activeTab === 'all') return this.orderArr;
      return this.orderArr.filter(o => o.status === this.activeTab);
    },
    sliderStyle() {
      const index = this.tabList.findIndex(tab => tab.key === this.activeTab);
      return {
        transform: `translateX(${index * 100}%)`,
        width: `${100 / this.tabList.length}%`
      };
    }
  },

  async created() {
    this.token = localStorage.getItem('token');
    await this.getUserbyToken();
    if (!this.user?.id) {
      console.warn('⚠️ 用户未登录，无法加载订单');
      return;
    }
    this.loadOrders();
  },

  methods: {
    getTabCount(tabKey) {
      if (tabKey === 'all') return this.orderArr.length;
      return this.orderArr.filter(o => o.status === tabKey).length;
    },

    async loadBusiness(businessId) {
      if (!businessId) return;
      if (this.businessMap[businessId]) return;
      try {
        const res = await this.$axios.get(`/businesses/${businessId}`, {
          headers: { Authorization: `Bearer ${this.token}` }
        });
        this.businessMap[businessId] = res.data.data;
      } catch (e) {
        console.error('获取商家信息失败', e);
        this.businessMap[businessId] = null;
      }
    },

    getBusinessName(order) {
      const bid = order.businessId ?? order.business?.id;
      if (!bid) return '未知商家';
      const b = this.businessMap[bid];
      return b ? b.businessName : '加载中…';
    },

    getUserbyToken() {
      return this.$axios.get('/user', {
        headers: { Authorization: `Bearer ${this.token}` }
      }).then(res => {
        this.user = res.data.data;
      });
    },

    deleteOrder(orderId) {
      this.$confirm('确定要删除该订单？此操作不可恢复！', '确认删除', {
        confirmButtonText: '确定删除',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.delete(`/orders/${orderId}`, {
          headers: { Authorization: `Bearer ${this.token}` }
        }).then(() => {
          const idx = this.orderArr.findIndex(o => o.id === orderId);
          if (idx > -1) this.orderArr.splice(idx, 1);
          this.$message.success('订单删除成功');
        }).catch(err => {
          console.error('删除订单失败', err);
          this.$message.error('删除失败，请稍后再试');
        });
      });
    },

    loadOrders() {
      const userId = this.user?.id;
      if (!userId) return;

      this.isLoading = true;
      this.$axios.get(`/orders/${userId}/user`, {
        headers: { Authorization: 'Bearer ' + this.token }
      }).then(async res => {
        const list = res.data.data || [];
        this.orderArr = [];

        const bidSet = [...new Set(list.map(o => o.businessId ?? o.business?.id).filter(Boolean))];
        await Promise.all(bidSet.map(id => this.loadBusiness(id)));

        for (const o of list) {
          const business = this.businessMap[o.businessId ?? o.business?.id] || {};
          const order = {
            ...o,
            showReviewForm: false, // 默认不显示评价表单
            status: o.status,
            showDetails: false,
            items: [],
            total: 0,
            // 修改判断逻辑：只有comment为空的订单才能评价
            canReview: o.status === 'ended' && (!o.comment || o.comment === ''),
            rating: o.star || 0,
            reviewText: o.comment || '',
            address: '',
            deliveryPrice : 0
          };
          order.deliveryPrice = (business.deliveryPrice || 0);

          order.total = (o.orderTotal || 0) ;

          if (order.addressId) {
            try {
              const addrRes = await this.$axios.get(`/addresses/${order.addressId}`, {
                headers: { Authorization: `Bearer ${this.token}` }
              });
              order.address = addrRes.data.data.address;
            } catch {
              order.address = '地址加载失败';
            }
          }
          this.orderArr.push(order);
        }

        this.loadOrderDetails();
      }).catch(err => {
        console.error('加载订单失败', err);
        this.$message.error('加载订单失败');
      }).finally(() => {
        this.isLoading = false;
      });
    },

    updateStatus(orderId, status) {
      this.$axios.put(`/orders/${orderId}/${status}`, null, {
        headers: { Authorization: `Bearer ${this.token}` }
      }).then(res => {
        const idx = this.orderArr.findIndex(o => o.id === orderId);
        if (idx === -1) return;
        this.orderArr[idx].status = status;
        this.$message.success('订单状态更新成功');
      }).catch(err => {
        console.error('更新订单状态失败', err);
        this.$message.error('更新失败');
      });
    },

    loadOrderDetails() {
      this.orderArr.forEach(order => {
        this.$axios.get(`/orders/${order.id}`, {
          headers: { 'Authorization': 'Bearer ' + this.token }
        })
          .then(res => {
            const detailList = res.data.data?.orderdetailetList || [];
            order.items = detailList.map(d => ({
              name: d.food?.foodName || '未知商品',
              quantity: d.quantity,
              price: d.food?.foodPrice || 0
            }));
          })
          .catch(err => {
            console.error(`加载订单 ${order.id} 明细失败`, err);
            order.items = [];
          });
      });
    },

    setActiveTab(tab) {
      this.activeTab = tab;
    },

    getStatusText(status) {
      const statusMap = {
        paid: '已支付',
        received: '商家接单',
        delivering: '配送中',
        unpaid: '未支付',
        ended: '已完成',
        refunded: '已退款',
        rejected: '商家拒单',
        unknown: '未知状态'
      };
      return statusMap[status] || '未知状态';
    },

    toggleDetails(order) {
      order.showDetails = !order.showDetails;
    },

    setRating(order, star) {
      order.rating = star;
    },

    submitReview(order) {
      if (!order.reviewText.trim()) {
        this.$message.warning('请输入评价内容');
        return;
      }
      if (!order.rating) {
        this.$message.warning('请选择星级');
        return;
      }


      this.$axios.post('/comments', {
        id: order.id,
        comment: order.reviewText,
        star: order.rating
      }, {
        headers: { 'Authorization': 'Bearer ' + this.token }
      }).then(() => {
        this.$message.success('评价成功');
        order.canReview = false;
        order.comment = order.reviewText;
        order.star = order.rating;
        order.showReviewForm = false;
      }).catch(() => {
        this.$message.error('评价失败');
      });
    },

    buyAgain(order) {
      this.$router.push({
        path: '/businessInfo',
        query: { businessId: order.businessId }
      });
    },

    getActions(order) {
      const baseActions = {
        unpaid: [
          { text: '取消订单', type: 'danger', action: 'cancelOrder' },
          { text: '立即支付', type: 'primary', action: 'payOrder' }
        ],
        received: [
          { text: '取消订单', type: 'danger', action: 'cancelOrder' }
        ],
        delivering: [
          { text: '取消订单', type: 'danger', action: 'cancelOrder' }
        ],
        paid: [
          { text: '再次购买', type: 'default', action: 'buyAgain' }
        ],
        ended: [
          { text: '再次购买', type: 'default', action: 'buyAgain' }
        ],
        refunded: [
          { text: '再次购买', type: 'default', action: 'buyAgain' }
        ],
        rejected: [
          { text: '再次购买', type: 'default', action: 'buyAgain' }
        ]
      };

      // 只有未评价的已完成订单才显示评价按钮
      if (order.status === 'ended' && order.canReview) {
        baseActions.ended.push(
          { text: '评价商家', type: 'primary', action: 'review' }
        );
      }

      return baseActions[order.status] || [];
    },

    handleAction(action, order) {
      switch (action.action) {
        case 'buyAgain':
          this.buyAgain(order);
          break;
        case 'review':
          // 点击评价商家按钮，显示评价表单
          if (order.showReviewForm) order.showReviewForm = false;
          else order.showReviewForm = true;
          break;
        case 'payOrder':
          this.$router.push({
            name: 'Payment',
            query: { orderId: order.id }
          });
          break;
        case 'cancelOrder':
          if (confirm('确定取消该订单？')) {
            this.updateStatus(order.id, 'refunded');
          }
          break;
        default:
          this.$message.info(`执行操作: ${action.text}`);
      }
    }
  }
};
</script>

<style scoped>
/* 原有样式保持不变，主要修改评价区域样式 */

/* 评价区域样式 */
.review-section {
  padding: 4vw;
  background: linear-gradient(135deg, #FFF9C4 0%, #FFECB3 100%);
  border-top: 1px solid #FFD54F;
  border-radius: 0 0 12px 12px;
}

.review-header {
  display: flex;
  align-items: center;
  gap: 2vw;
  margin-bottom: 3vw;
}

.review-icon {
  color: #FFC107;
  font-size: 4.5vw;
}

.review-header h4 {
  margin: 0;
  font-size: 4vw;
  color: #333;
  font-weight: 600;
}

/* 评分区域 */
.rating-section {
  text-align: center;
  margin-bottom: 3vw;
  padding: 2vw;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 8px;
}

.rating-title {
  font-size: 5vw;
  color: #FF9800;
  font-weight: bold;
  margin-bottom: 2vw;
}

.rating-stars {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3vw;
  margin-bottom: 1vw;
}

.star {
  color: #ddd;
  font-size: 6vw;
  cursor: pointer;
  transition: all 0.2s ease;
}

.star.active {
  color: #FFC107;
  transform: scale(1.1);
}

.star:hover {
  transform: scale(1.2);
}

/* 评价内容 */
.comment-section {
  margin-bottom: 3vw;
}

.review-textarea {
  width: 100%;
  padding: 3vw;
  border: 2px solid #FFD54F;
  border-radius: 10px;
  font-size: 3.8vw;
  resize: vertical;
  min-height: 20vw;
  background: white;
  transition: border-color 0.3s ease;
  box-sizing: border-box;
}

.review-textarea:focus {
  outline: none;
  border-color: #FFC107;
  box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.1);
}

.review-textarea::placeholder {
  color: #999;
}

/* 评价操作按钮 */
.review-actions {
  text-align: center;
}

.btn-submit {
  display: inline-flex;
  align-items: center;
  gap: 2vw;
  padding: 3vw 6vw;
  background: linear-gradient(135deg, #FFC107 0%, #FF8F00 100%);
  color: white;
  border: none;
  border-radius: 20px;
  font-size: 4vw;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(255, 193, 7, 0.4);
  margin: 0 auto;
}

.btn-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(255, 193, 7, 0.6);
}

/* 已评价区域样式 */
.reviewed-section {
  padding: 3vw 4vw;
  background: linear-gradient(135deg, #E8F5E8 0%, #C8E6C9 100%);
  border-top: 1px solid #4CAF50;
  border-radius: 0 0 12px 12px;
}

.reviewed-header {
  display: flex;
  align-items: center;
  gap: 2vw;
  margin-bottom: 2vw;
}

.reviewed-icon {
  color: #4CAF50;
  font-size: 4.5vw;
}

.reviewed-text {
  font-size: 4vw;
  color: #2E7D32;
  font-weight: 600;
}

.reviewed-content {
  padding: 2vw;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 8px;
}

.reviewed-rating {
  display: flex;
  align-items: center;
  gap: 2vw;
  margin-bottom: 1.5vw;
}

.reviewed-rating .rating-stars {
  justify-content: flex-start;
  gap: 1vw;
}

.reviewed-rating .star {
  font-size: 4vw;
}

.rating-value {
  font-size: 3.6vw;
  color: #FF9800;
  font-weight: 500;
  margin-left: 2vw;
}

.reviewed-comment {
  font-size: 3.8vw;
  color: #333;
  line-height: 1.4;
  padding: 2vw;
  background: white;
  border-radius: 6px;
  border-left: 3px solid #4CAF50;
}

/* 其他原有样式保持不变 */
.order-list-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #e8f4f8 100%);
  font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
  padding-bottom: 16vw;
}

.order-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 12vw;
  background: linear-gradient(135deg, #0097FF 0%, #0066cc 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4vw;
  z-index: 1000;
  box-shadow: 0 4px 20px rgba(0, 151, 255, 0.3);
}

.back-btn {
  font-size: 5vw;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.back-btn:hover {
  transform: translateX(-3px);
}

.order-header h1 {
  font-size: 4.5vw;
  font-weight: 600;
  margin: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header-placeholder {
  width: 8vw;
}

.order-tabs-container {
  position: fixed;
  top: 12vw;
  left: 0;
  width: 100%;
  background: white;
  z-index: 999;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.tabs-wrapper {
  display: flex;
  position: relative;
  background: white;
}

.order-tab {
  flex: 1;
  text-align: center;
  padding: 3.5vw 0;
  font-size: 3.8vw;
  font-weight: 500;
  color: #666;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5vw;
}

.order-tab.active {
  color: #0097FF;
  font-weight: 600;
}

.tab-badge {
  background: #FF6B6B;
  color: white;
  border-radius: 10px;
  padding: 0.5vw 1.5vw;
  font-size: 3vw;
  min-width: 5vw;
  text-align: center;
}

.tab-slider {
  position: absolute;
  bottom: 0;
  height: 3px;
  background: #0097FF;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 3px 3px 0 0;
}

.orders-main {
  padding: 32vw 4vw 4vw;
}

.loading-state {
  text-align: center;
  padding: 10vw 0;
  color: #666;
}

.loading-spinner {
  margin-bottom: 3vw;
}

.loading-spinner i {
  font-size: 8vw;
  color: #0097FF;
  animation: spin 1s linear infinite;
}

.loading-state p {
  font-size: 3.8vw;
  margin: 0;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.empty-state {
  text-align: center;
  padding: 15vw 4vw;
  color: #999;
}

.empty-icon {
  width: 20vw;
  height: 20vw;
  background: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 4vw;
}

.empty-icon i {
  font-size: 8vw;
  color: #2196F3;
}

.empty-state h3 {
  font-size: 4.5vw;
  margin: 0 0 2vw;
  font-weight: 600;
}

.empty-state p {
  font-size: 3.8vw;
  margin: 0 0 6vw;
}

.browse-btn {
  display: flex;
  align-items: center;
  gap: 2vw;
  padding: 3vw 6vw;
  background: linear-gradient(135deg, #0097FF 0%, #0066cc 100%);
  color: white;
  border: none;
  border-radius: 20px;
  font-size: 3.8vw;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 151, 255, 0.4);
  margin: 0 auto;
}

.browse-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 151, 255, 0.6);
}

.browse-btn i {
  font-size: 4vw;
}

.orders-grid {
  display: flex;
  flex-direction: column;
  gap: 3vw;
}

.order-card {
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.order-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4vw;
  background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%);
  border-bottom: 1px solid #f0f0f0;
}

.shop-info {
  display: flex;
  align-items: center;
  gap: 2vw;
}

.shop-icon {
  color: #0097FF;
  font-size: 4.5vw;
}

.shop-name {
  font-size: 4.2vw;
  font-weight: 600;
  color: #333;
}

.order-status {
  padding: 1.5vw 3vw;
  border-radius: 20px;
  font-size: 3.4vw;
  font-weight: 500;
}

.status-unpaid {
  background: #FFF3E0;
  color: #FF9800;
}

.status-paid {
  background: #E3F2FD;
  color: #2196F3;
}

.status-received {
  background: #E8F5E8;
  color: #4CAF50;
}

.status-ended {
  background: #F3E5F5;
  color: #9C27B0;
}

.status-refunded {
  background: #FFEBEE;
  color: #F44336;
}

.status-rejected {
  background: #F5F5F5;
  color: #757575;
}

.card-body {
  padding: 4vw;
}

.order-items {
  margin-bottom: 3vw;
}

.order-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5vw 0;
  border-bottom: 1px dashed #f0f0f0;
}

.order-item:last-child {
  border-bottom: none;
}

.item-name {
  flex: 1;
  font-size: 3.8vw;
  color: #333;
}

.item-quantity {
  font-size: 3.6vw;
  color: #666;
  margin: 0 2vw;
}

.item-price {
  font-size: 3.8vw;
  color: #333;
  font-weight: 500;
}

.order-summary {
  border-top: 1px solid #f0f0f0;
  padding-top: 3vw;
}

.delivery-fee,
.order-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1vw 0;
}

.delivery-fee {
  font-size: 3.6vw;
  color: #666;
}

.order-total {
  font-size: 4.2vw;
  font-weight: 600;
  color: #333;
}

.total-amount {
  color: #FF6B6B;
  font-size: 4.5vw;
}

.details-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2vw;
  padding: 3vw;
  background: #fafafa;
  color: #666;
  cursor: pointer;
  transition: background-color 0.3s ease;
  border-top: 1px solid #f0f0f0;
}

.details-toggle:hover {
  background: #f0f0f0;
}

.toggle-text {
  font-size: 3.6vw;
}

.details-toggle i {
  font-size: 3.8vw;
  transition: transform 0.3s ease;
}

.order-details {
  padding: 4vw;
  background: #fafafa;
  border-top: 1px solid #f0f0f0;
}

.detail-row {
  display: flex;
  align-items: center;
  gap: 3vw;
  padding: 2vw 0;
}

.detail-icon {
  width: 5vw;
  text-align: center;
  color: #0097FF;
  font-size: 4vw;
}

.detail-content {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.detail-label {
  font-size: 3.6vw;
  color: #666;
}

.detail-value {
  font-size: 3.6vw;
  color: #333;
  font-weight: 500;
}

.card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 2vw;
  padding: 4vw;
  border-top: 1px solid #f0f0f0;
}

.action-btn {
  padding: 2.5vw 4vw;
  border: none;
  border-radius: 20px;
  font-size: 3.6vw;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 20vw;
  text-align: center;
}

.btn-primary {
  background: linear-gradient(135deg, #0097FF 0%, #0066cc 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(0, 151, 255, 0.4);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 151, 255, 0.6);
}

.btn-danger {
  background: linear-gradient(135deg, #FF6B6B 0%, #FF4757 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(255, 107, 107, 0.4);
}

.btn-danger:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(255, 107, 107, 0.6);
}

.btn-default {
  background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 100%);
  color: #666;
}

.btn-default:hover {
  background: linear-gradient(135deg, #e0e0e0 0%, #d0d0d0 100%);
  transform: translateY(-2px);
}

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 16vw;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-top: 1px solid #e0e0e0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 100;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #999;
  font-size: 3vw;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 2vw;
  border-radius: 10px;
}

.nav-item.active {
  color: #0097FF;
  transform: translateY(-3px);
}

.nav-item i {
  font-size: 5.5vw;
  margin-bottom: 1vw;
  transition: all 0.3s ease;
}

.nav-item.active i {
  transform: scale(1.2);
}

.nav-item span {
  font-size: 3vw;
  font-weight: 500;
}

@media (min-width: 768px) {
  .order-list-container {
    max-width: 500px;
    margin: 0 auto;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  }

  .order-header {
    height: 60px;
    padding: 0 20px;
  }

  .order-header h1 {
    font-size: 20px;
  }

  .back-btn {
    font-size: 20px;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.order-card {
  animation: fadeInUp 0.5s ease-out;
}
</style>